<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 导入css样式 -->
		<link href="../lib/css/bootstrap.min.css" rel="stylesheet" />
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<script type="text/javascript" src="../lib/js/bootstrap.min.js" ></script>
		<script type="text/javascript">
		
		$(function() {
			//为删除样式按钮添加点击事件
			removeSection = function(e) {
				
				//删除当前 a 标签的父标签class为 .section 的 
				$(e).parents(".section").remove();
				
				//更新当前 data-spy="scroll" 的 DOM
				$('[data-spy="scroll"]').each(function() {
					var $spy = $(this).scrollspy('refresh')
				});
			}
			
		});
	</script>
		
	</head>
	<body>

	<!-- 导航栏主标签 --> 
	<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation">
		<div class="navbar-header">
			<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
		         <span class="sr-only">切换导航</span>
		         <span class="icon-bar"></span>
		         <span class="icon-bar"></span>
		         <span class="icon-bar"></span>
	        </button>
			<a class="navbar-brand" href="#">教程名称</a>
		</div>
		<!-- 为列表添加 scollapse 塌陷样式 -->
		<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
			<!-- 导航菜单 -->
			<ul class="nav navbar-nav">
				<li class="active"><a href="#ios">iOS</a></li>
				<li><a href="#svn">SVN</a></li>
				<!-- 带有下拉列表的选项 -->
				<li class="dropdown">
					<a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">
						Java <b class="caret"></b></a>
					<!-- 下拉列表的子选项 -->
					<ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
						<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
						<li><a href="#ejb" tabindex="-1">ejb</a></li>
						<li class="divider"></li>
						<li><a href="#spring" tabindex="-1">spring</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</nav>
	
	<!--
    	data-spy="scroll"：表示想要监听该元素
    	data-target=#myScrollspy：和上面的导航栏相关联
    	描述：
    -->
    
    <script type="text/javascript">
    	$(function(){
    		//$("#myScrollspy").scrollspy();
			//每当一个新项目被滚动监听激活时
			$('#myScrollspy').on('activate.bs.scrollspy', function() {
				
				//得到正在浏览的项目链接锚点
				var currentItem = $(".nav li.active > a").text();
				$("#activeitem font").html("目前您正在查看 - " + currentItem);
			})
    	});
    </script>
    
	<div data-spy="scroll" data-target="#myScrollspy" data-offset="0" style="height:200px;overflow:auto; position: relative;">
		
		<div class="section">
			<h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);">
	         &times; 删除该部分</a></small>
	      </h4>
			<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
		</div>
		
		<div class="section">
			<h4 id="svn">SVN<small></small></h4>
			<p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。</p>
		</div>
		
		<div class="section">
			<h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">
	         &times; 删除该部分</a></small>
	      </h4>
			<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
		</div>
		
		<div class="section">
			<h4 id="ejb">EJB</h4>
			<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p>
		</div>
		
		<div class="section">
			<h4 id="spring">Spring</h4>
			<p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。</p>
			<p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。</p>
		</div>
	</div>
	
	<!-- 目前您正在查看 -->
	<div id="activeitem">
		<font color="red"></font>
	</div>
		
		

	
	</body>
</html>
